<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />
	</head>

	<body>
		<div class="jumbotron jumbotron-fluid">
			<div class="container text-center">
				<h1 class="display-4">JavaScipt ToDo</h1>
				<p class="lead">待办事项</p>
			</div>
		</div>
		<div class="container">
			<form class="mb-5 action=" " onsubmit="return false ">
				<div class="form-group ">
					<input id="ipt" type="text " class="form-control " placeholder="在此输入任务 ... "/>
				</div>
				<button id="btn" type="submit " class="btn btn-primary btn-block ">添加</button>
			</form>
			<ul class="list-group" id="ul"></li>
		</div>
		
		
		
		
		
		<script type="text/javascript ">
			let lists=["学习JavaSceipt ","学习css3 ","学习HTML5 "]

			function d(){
				document.querySelector('#ul').innerHTML=''
			for(let i=0;i<lists.length;i++){

				let li=document.createElement('li')
				li.classList.add('list-group-item')
				li.classList.add('d-flex')
				li.classList.add('justify-content-between')
				li.classList.add('align-items-center')
				
				
				let span=document.createElement('span')
				let spanText=document.createTextNode(lists[i])
				span.appendChild(spanText)
				
				span.addEventListener('dblclick',function(){
					console.log(this)
					this.setAttribute('contenteditable',true)
				})
				
				let button=document.createElement('button')
				button.type='button'
				button.classList.add('close')
				button.innerHTML='&times;'
				
				button.addEventListener('click',function(){
					console.log(i)
					lists.splice(i,1)
					d()
				})
				
				
				li.appendChild(span)
				li.appendChild(button)
				console.log(li)
				
				let ul=document.querySelector('#ul')
				ul.appendChild(li)
			}
			}
			d()
			
			let ipt=document.querySelector('#ipt')
			let btn=document.querySelector('#btn')
			btn.addEventListener('click',function(){
				if(ipt.value !=''){
					lists.push(ipt.value)
				}else{
					alert("不可以为空 ")
				}
				
				d()
			})
		</script>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>